<!-- 案场日报 -->
<template>
  <div class="daily_paper">
    <div class="daily_paper_header">
      <div class="label">
        <div>{{ buildingName }}</div>
        <div class="label_date">
          <div v-if="isEdit">
            <Icon type="ios-calendar-outline" />
            {{ currentDate }}
          </div>
          <DatePicker
            v-else
            :open="open"
            :model-value="currentDate"
            type="date"
            @on-change="handleChange"
            :options="options">
            <a href="javascript:void(0)" @click="handleClick">
              <Icon type="ios-calendar-outline"></Icon>
              <template>{{ currentDate }}</template>
            </a>
          </DatePicker>
        </div>
        <div>案场日报</div>
      </div>
    </div>
    <Tabs :value="tabVal" type="card" :animated="false" @on-click="tabValChange" name="dailyTab">
      <TabPane label="报表模式" name="1" tab="dailyTab"></TabPane>
      <TabPane label="图表模式" name="2" tab="dailyTab">
        <echarts-page ref="echartsPage" @changeMode="changeMode" />
      </TabPane>
    </Tabs>
    <div v-show="tabVal == 1">
      <Row class="label_warp" v-show="!isEdit">
        <Col span="24" class="tips">
          <Icon type="md-alert" class="tips_icon" />
          <div>以下为本案场今日日报，您可点击右上角“编辑日报”按钮，向日报中添加联代、竞品信息及今日小结</div>
        </Col>
      </Row>
      <div class="daily_paper_main">
        <div style="width: 100%; flex: 1">
          <div class="content">
            <div class="title">
              <div class="houses_name">{{ buildingName }}</div>
              <div>
                <span>日期：</span>
                {{ currentDate }}
              </div>
            </div>
            <div style="padding: 20px 10px">
              <!-- 今日小结 -->
              <summary-page ref="summaryPage" :isEdit="isEdit" @callBack="summaryCallBack" />
              <!-- Pk数据 -->
              <pk-page ref="pkPage" :isEdit="isEdit" @callBack="pkCallBack" />
              <!-- 客户统计暂时去除，保留 -->
              <!-- <customer-statistics-page ref="customerStatisticsPage" :isEdit="isEdit" /> -->
              <!-- 渠道统计 -->
              <channel-page ref="channelPage" :isEdit="isEdit" />
              <!-- 销售统计 -->
              <sales-page ref="salesPage" :isEdit="isEdit" />
              <!-- 重点客户 -->
              <client-page ref="clientPage" :isEdit="isEdit" />
            </div>
          </div>
        </div>
        <div>
          <div class="flex">
            <div class="edit_btn" v-show="isEdit">
              <Button type="primary" @click="addSummary">{{ summaryBtnTxt }}</Button>
              <Button type="primary" @click="addProxies">{{ pkBtnTxt }}联代</Button>
              <Button type="primary" @click="addMatch">{{ pkBtnTxt }}竞品</Button>
              <Button type="primary" @click="adjustClient">调整展示客户</Button>
            </div>
            <div class="handel_btn">
              <Button type="primary" v-show="!isEdit && unlocking('0108010300')" @click="editDaily">
                编辑日报
              </Button>
              <Button type="success" v-show="isEdit && unlocking('0108010300')" @click="saveDaily">
                保存日报
              </Button>
              <Button type="success" v-show="!isEdit && unlocking('0108010100')" @click="setTemplate">
                设置日报模板
              </Button>
              <Button type="success" v-show="!isEdit && unlocking('0108010200')" @click="createTxt">
                生成文字日报
              </Button>
            </div>
          </div>

          <p style="margin-top: 10px; color: #999; text-align: center" v-if="isEdit">
            注意：当日报编辑并保存后（点击“保存日报”按钮），视为完成日报维护任务
          </p>
          <div style="margin-top: 30px">
            <div id="qrcode" class="qrcode" ref="qrcode" style="margin: 0 auto 10px"></div>
            <span style="margin-left: 30px">扫描二维码，可查看完整日报</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 设置日报模板 -->
    <daily-template ref="dailyTemplateModal" @success="onSuccess" />
    <!-- 生成文字日报 -->
    <create-daily ref="createDailyModal" />
    <!-- 添加小结 -->
    <summary-modal ref="summaryModal" @success="summaryonSuccess" />
    <!-- 添加联代 添加竞品 -->
    <proxies-match ref="proxiesOrmatchModal" @success="proxiesOrmatchonSuccess" />
    <!-- 调整展示客户 -->
    <adjust-client ref="adjustClientModal" @success="adjustonSuccess" />
    <dt-loading :loading="loading" />
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2-fix'
  import dailyTemplate from './component/modal/dailyTemplate.vue'
  import createDaily from './component/modal/createDaily.vue'
  import summaryModal from './component/modal/summary.vue'
  import proxiesMatch from './component/modal/proxiesOrmatch.vue'
  import adjustClient from './component/modal/adjustClient.vue'
  import summaryPage from './component/page/summaryPage.vue'
  import pkPage from './component/page/pkPage.vue'
  // import customerStatisticsPage from './component/page/customerstatisticsPage.vue'
  import channelPage from './component/page/channelPage.vue'
  import salesPage from './component/page/salesPage.vue'
  import clientPage from './component/page/clientPage.vue'
  import moment from 'moment'
  import dailyApi from '@/biz/buildingHome/daily'
  import echartsPage from './component/echartsPage/charts.vue'
  export default {
    components: {
      dailyTemplate,
      createDaily,
      summaryModal,
      proxiesMatch,
      adjustClient,
      summaryPage,
      pkPage,
      // customerStatisticsPage,
      channelPage,
      salesPage,
      clientPage,
      echartsPage
    },
    data() {
      return {
        options: {
          disabledDate(date) {
            return (
              date &&
              (date.valueOf() < new Date().getTime() - (365 * 1 * 24 * 3600 * 1000 + 86400000) ||
                date.valueOf() > Date.now())
            )
          }
        },
        buildingName: this.$dt.buildInfo().housesName,
        currentDate: moment(new Date()).format('YYYY-MM-DD'),
        open: false,
        isEdit: false,
        summaryBtnTxt: '添加小结',
        pkBtnTxt: '添加',
        templateAllList: [],
        loading: false,
        tabVal: '1',
        odlTabVal: '1'
      }
    },
    methods: {
      tabValChange(val) {
        console.log(val)
        if (this.odlTabVal == val) return false
        this.tabVal = val
        this.odlTabVal = val
        if (val == 2) {
          dailyApi.logGenerate({ actionType: 'chart_tab' })
          this.$refs.echartsPage.getTemplate({ currentDate: this.currentDate })
        }
      },
      //图表模式 立即设置按钮
      changeMode(val) {
        this.tabVal = '1'
        this.odlTabVal = val
        if (val == 1) {
          this.editDaily()
        } else if (val == '-1') {
          this.setTemplate()
        }
      },
      handleClick() {
        this.open = !this.open
      },
      handleChange(date) {
        this.currentDate = date
        this.open = false
        this.init()
        this.$refs.echartsPage.getTemplate({ currentDate: this.currentDate })
      },
      //获取所有数据
      init() {
        console.log('获取所有数据')
        this.$refs.summaryPage.getData()
        this.$refs.pkPage.getData()
        // this.$refs.customerStatisticsPage.getTemplate({
        //   templateAllList: this.templateAllList
        // })
        this.$refs.channelPage.getTemplate({ templateAllList: this.templateAllList })
        this.$refs.salesPage.getTemplate({ templateAllList: this.templateAllList })
        this.$refs.clientPage.getData()
        // buildingId=104873&buildingName=天河理想城&dateType=TODAY&startDate=2023-06-19&endDate=2023-06-19&userName=鉏玉宇&workNo=dt004&userId=10244
        this.iframeUrl = `https://manage.tospurfang.com/#/pages/daily/index?buildingId=${
          this.$dt.buildInfo().housesId
        }&buildingName=${this.$dt.buildInfo().housesName}&dateType=TODAY&startDate=${
          this.currentDate
        }&endDate=${this.currentDate}`
        // this.iframeUrl = `${this.$dt.env.h5Url}/#/pages/daily/index?buildingId=${
        //   this.$dt.buildInfo().housesId
        // }&buildingName=${this.$dt.buildInfo().housesName}&dateType=TODAY&startDate=${
        //   this.currentDate
        // }&endDate=${this.currentDate}&userName=${this.$dt.userInfo().userName}&userId=${
        //   this.$dt.userInfo().userId
        // }&workNo=${this.$dt.userInfo().workNo}`
        this.$nextTick(() => {
          document.getElementById('qrcode').innerHTML = ''
          new QRCode('qrcode', {
            width: 250, // 设置宽度，单位像素
            height: 250, // 设置高度，单位像素
            text: this.iframeUrl // 设置二维码内容或跳转地址
          })
        })
      },
      //编辑日报
      editDaily() {
        dailyApi.logGenerate({ actionType: 'edit_daily' })
        this.isEdit = true
        this.$refs.summaryPage.showMore(false)
        this.$refs.pkPage.showMore(false)
      },
      //保存日报
      saveDaily() {
        dailyApi.logGenerate({ actionType: 'save_daily' })
        this.isEdit = false
        this.$refs.summaryPage.showMore(false)
        this.$refs.pkPage.showMore(false)
        dailyApi.updateTask({
          taskId: 35,
          taskStatus: 2,
          buildingId: this.$dt.buildInfo().housesId,
          date: this.currentDate
        })
      },
      //生成文字日报
      createTxt() {
        dailyApi.logGenerate({ actionType: 'generate_daily' })
        let data = {
          templateAllList: this.templateAllList,
          currentDate: this.currentDate
        }
        this.$refs.createDailyModal.show(data)
      },
      //设置日报模板
      setTemplate() {
        dailyApi.logGenerate({ actionType: 'set_daily_template' })
        this.$refs.dailyTemplateModal.show({
          date: this.currentDate,
          templateAllList: this.templateAllList
        })
      },
      //添加/编辑 小结
      addSummary() {
        if (this.summaryBtnTxt == '添加小结') {
          this.$refs.summaryModal.show({ title: '添加今日小结', currentDate: this.currentDate })
        } else {
          this.$refs.summaryPage.editSummary()
        }
      },
      //添加联代
      addProxies() {
        let data = {
          type: 1,
          title: `${this.pkBtnTxt}联代日报`,
          topTips: '您可在您的案场日报中添加联代方，并填写联代方的来人及成交信息',
          currentDate: this.currentDate
        }
        this.$refs.proxiesOrmatchModal.show(data)
      },
      //添加竞品
      addMatch() {
        let data = {
          type: 2,
          title: `${this.pkBtnTxt}竞品日报`,
          topTips: '您可在您的案场日报中添加竞品，并填写竞品的来人及成交信息',
          currentDate: this.currentDate
        }
        this.$refs.proxiesOrmatchModal.show(data)
      },
      //调整展示客户
      adjustClient() {
        dailyApi.logGenerate({ actionType: 'adjust_show_customer' })
        this.$refs.adjustClientModal.show(this.currentDate)
      },
      onSuccess() {
        this.getTemplate()
        this.$refs.echartsPage.getTemplate({ currentDate: this.currentDate })
      },
      //小结添加完成
      summaryonSuccess() {
        this.$refs.summaryPage.getData()
      },
      //添加联代 添加竞品
      proxiesOrmatchonSuccess() {
        //后台数据有延迟 加300ms延迟请求
        setTimeout(() => {
          this.$refs.pkPage.getData()
        }, 300)
      },
      //展示客户调整完成
      adjustonSuccess() {
        this.$refs.clientPage.getData()
      },
      //是否已存在小结数据
      summaryCallBack(val) {
        if (val) {
          this.summaryBtnTxt = '编辑小结'
        } else {
          this.summaryBtnTxt = '添加小结'
        }
      },
      //是否已存在pk数据
      pkCallBack(val) {
        if (val) {
          this.pkBtnTxt = '编辑'
        } else {
          this.pkBtnTxt = '添加'
        }
      },
      //获取案场日报模板
      getTemplate() {
        this.loading = true
        dailyApi.getModelList({ buildingId: this.$dt.buildInfo().housesId }).then((res) => {
          console.log(res, '日报模板数据')
          this.loading = false
          this.templateAllList = res
          this.init()
        })
      },
      onChangeSales() {
        console.log('changeSales')
        this.getTemplate()
      }
    },
    mounted() {
      this.$$on('changeSales')
      this.getTemplate()
      // 待办跳转 默认是编辑状态
      if (this.$route.params.isDefaultEdit) {
        this.editDaily()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .daily_paper {
    padding: 20px;
    box-sizing: border-box;

    .daily_paper_header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;

      .label {
        font-size: 18px;
        width: 50%;
        display: flex;

        .label_date {
          margin: 0 5px;

          ::v-deep .ivu-select-dropdown {
            font-size: 14px;
          }
        }
      }
    }

    .label_warp {
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;

      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;
        justify-content: center;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .daily_paper_main {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .content {
        flex: 1;
        margin: 0 100px;
        width: 450px;
        max-height: calc(100vh - 280px);
        min-height: calc(100vh - 280px);
        border: 1px solid #ccc;
        overflow-y: auto;

        .title {
          display: flex;
          justify-content: space-between;
          background-color: rgba(215, 215, 215, 1);
          height: 50px;
          line-height: 50px;
          padding: 0 10px;

          .houses_name {
            font-size: 18px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
          }
        }
      }
    }

    .handel_btn,
    .edit_btn {
      .ivu-btn {
        margin-left: 10px;
      }
    }
  }
</style>
